<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>表白墙</title>
</head>
<body>
    <form method="post" action="/save-message.do">
        <input type="text" name="who" placeholder="谁">
        <input type="text" name="whom" placeholder="对谁">
        <input type="text" name="what" placeholder="说什么">
        <button>保存</button>
    </form>
    <table>
        <thead>
            <tr>
                <th>谁</th>
                <th>对谁</th>
                <th>说什么</th>
            </tr>
        </thead>
        <!-- tbody 标签下完全没有东西，所以在页面上是什么都看不到的 -->
        <!-- 我们要通过 JS 发送 ajax 请求，从后端读取一份 消息列表下来，以 JSON 格式传递 -->
        <!-- 然后 JS 中根据读取到的内容，修改 DOM 结构：为 <tbody> 增加孩子 <tr><td>...</tr> -->
        <!-- 最终使得用户客户在页面上看到消息列表 -->
        <tbody></tbody>
    </table>

    <script src="message-list.js"></script>
</body>
</html>